<template>
    <div>
        <div class="header">
            <div class="title">
                <span>管理任务类型</span>
            </div>
            <el-row>
                <el-col :span="1.5">
                    <el-button
                        type="primary"
                        plain
                        icon="el-icon-plus"
                        size="mini"
                        @click="handleAdd"
                    >
                        新增
                    </el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button
                        type="danger"
                        plain
                        icon="el-icon-delete"
                        size="mini"
                        :disabled="this.multipleSelection.length===0"
                        @click="handleDeleteMany"
                    >
                        批量删除
                    </el-button>
                </el-col>
            </el-row>
            <el-dialog title="添加任务类型" :visible.sync="dialogVisible1" width="30%">
                <div>
                    <el-tag>任务类型名</el-tag>
                    <el-input v-model="task.taskTypeName" size="small" placeholder="请输入任务类型名" class="updatePosInput" />
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button size="small" @click="dialogVisible1 = false">取 消</el-button>
                    <el-button size="small" type="primary" @click="addTaskType">确 定</el-button>
                </span>
            </el-dialog>
        </div>
        <div class="content">
            <el-table :data="taskTypeList" border stripe @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="50" align="center" />
                <el-table-column key="id" label="任务类型编号" align="center" prop="id" />
                <el-table-column key="taskTypeName" label="任务类型名" align="center" prop="taskTypeName" />
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button
                            size="middle"
                            type="text"
                            icon="el-icon-edit"
                            @click="handleUpdate(scope.$index, scope.row)"
                        >
                            修改
                        </el-button>
                        <el-button
                            size="middle"
                            type="text"
                            icon="el-icon-delete"
                            @click="handleDelete(scope.row)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog title="编辑任务类型" :visible.sync="dialogVisible2" width="30%">
                <div>
                    <el-tag>任务类型名</el-tag>
                    <el-input v-model="updateTask.taskTypeName" size="small" class="updatePosInput" />
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button size="small" @click="dialogVisible2 = false">取 消</el-button>
                    <el-button size="small" type="primary" @click="updateTaskType">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
export default {
    name: 'TaskType',
    data() {
        return {
            task: {
                taskTypeName: ''
            },
            updateTask: {
                taskTypeName: ''
            },
            taskTypeName: '',
            taskTypeList: [],
            dialogVisible1: false,
            dialogVisible2: false,
            multipleSelection: []
        }
    },
    mounted() {
        this.initTaskTypeList()
    },
    created() {
        this.initTaskTypeList()
    },
    methods: {
        handleAdd() {
            this.dialogVisible1 = true
        },
        handleDelete(data) {
            this.$confirm('此操作将永久删除[' + data.taskTypeName + ']任务类型,是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteRequest('/system/task/deleteTaskType', data.id).then(resp => {
                    if (resp) {
                        this.initTaskTypeList()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        handleSelectionChange(selection) {
            this.multipleSelection = selection
        },
        initTaskTypeList() {
            this.getRequest('/system/task/getAllTaskType').then(resp => {
                if (resp) {
                    this.taskTypeList = resp.data.obj
                }
            })
        },
        addTaskType() {
            if (this.task.taskTypeName) {
                this.postRequest('/system/task/addTaskType', this.task).then(resp => {
                    if (resp) {
                        this.initTaskTypeList()
                        this.task.taskTypeName = ''
                        this.dialogVisible1 = false
                    }
                })
            } else {
                this.$message.error('字段不能为空！')
            }
        },
        handleUpdate(index, data) { // 职称管理更新
            Object.assign(this.updateTask, data)
            this.dialogVisible2 = true
        },
        updateTaskType() {
            this.putRequest('/system/task/updateTaskType', this.updateTask).then(resp => {
                if (resp) {
                    this.initTaskTypeList()
                    this.dialogVisible2 = false
                }
            })
        },
        handleDeleteMany() {
            this.$confirm('此操作将永久删除[' + this.multipleSelection.length + ']条任务记录,是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let ids = '?'
                this.multipleSelection.forEach(item => {
                    ids += 'ids=' + item.id + '&'
                })
                this.deleteRequest('/system/task/deleteBatchTaskType' + ids).then(resp => {
                    if (resp) {
                        this.initTaskTypeList()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        }
    }
}
</script>

<style scoped lang="scss">
.header {
    padding-top: 30px;
    padding-bottom: 15px;
}
.title {
    margin-left: 20px;
    color: #337ab7;
}
.el-button {
    margin-top: 20px;
    margin-left: 30px;
}
.updatePosInput {
    width: 200px;
    margin-left: 8px;
}
</style>
